<template>
  <div id="find">
    <header>
      <div>
        <div class="hd-l"  @click='back'>
          <i class="iconfont icon-fanhui"></i>
        </div>
        <h2>发现</h2>
      </div>
    </header>
    <section class="fd-t">
  
      <div class="fdt-t" v-if='sites.loaded'>
        <a :href="site.content_url" v-for='(site,index) in sites.sites' :key='index'>
          <img :src="site.main_pic_hash">
          <h2>{{ site.title }}</h2>
          <p>{{ site.subtitle }}</p>
        </a>
      </div>
      <div class="fdt-b" v-if='lists.loaded'>
        <a :href='list.content_url' v-for='(list,index) in lists.lists' :key='index'>
          <img :src="list.sub_pic_hash" />
        </a>
      </div>
    </section>
    <section class="fd-m common" v-if='arrs.loaded'>
      <div class="fdm-t">
        <div class="top">
          <span class="left"></span>
          <i class="iconfont icon-good"></i>
          <h2>美食热推</h2>
          <span class="right"></span>
        </div>
        <div class="bottom">
          你的口味，我都懂得
        </div>
      </div>
      <div class="fdm-m">
        <a href='#' v-for='(arr,index) in arrs.arrs' :key='index'>
          <img :src="arr.image_hash" />
          <p>{{ arr.name }}</p>
          <div class="bottom">
            <span>¥
              <span>{{ arr.price }}</span>
            </span>
          </div>
        </a>
      </div>
      <div class="fdm-b">
        <router-link to='/'>
          查看更多
        </router-link>
        <i class="iconfont icon-xiangyou"></i>
      </div>
    </section>
    <section class="fd-b common" v-if='btns.loaded'>
      <div class="fdm-t">
        <div class="top">
          <span class="left"></span>
          <i class="iconfont icon-good"></i>
          <h2>限时好礼</h2>
          <span class="right"></span>
        </div>
        <div class="bottom">
          小积分换豪礼
        </div>
      </div>
      <div class="fdm-m">
        <a :href='btns.url' v-for='(btns,index) in btns.btns' :key='index'>
          <img :src="btns.image_hash" />
          <p>{{btns.title}}</p>
          <div class="bottom">
            <span>{{ btns.points_required+'积分' }}</span>
            <span v-show='btns.original_price'>{{'¥'+btns.original_price}}</span>
          </div>
          <span>{{ btns.corner_marker }}</span>
        </a>
      </div>
      <div class="fdm-b">
        <router-link to='/'>
          查看更多
        </router-link>
        <i class="iconfont icon-xiangyou"></i>
      </div>
    </section>
    <foot></foot>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import axios from 'axios';
import foot from './Footer';

export default {
  name: 'find',
  components: { foot },
  methods: {
    back: function () {
      window.history.go(-1);
    }
  },
  data() {
    return {
      sites: {
        loaded: false,
        sites: []
      },
      lists: {
        loaded: false,
        lists: []
      },
      arrs: {
        loaded: false,
        arrs: []
      },
      btns: {
        loaded: false,
        btns: []
      }
    }
  },
  computed: {
    ...mapState(['position'])
  },
  mounted() {
    var lng = '';
    var lat = '';
    if (this.position) {
      lng = this.position.lng;
      lat = this.position.lat;
    } else {
      this.$watch('position', function (newVal, oldVal) {
        lng = newVal.lng;
        lat = newVal.lat;
      })
    }
    //  获取经纬度
    let that = this;
    //  后台请求数据discover/v1
    axios.get('http://localhost:3000/discover/v1', {
      params: {
        lng: lng,
        lat: lat
      }
    }).then((successCB) => {
      // console.log(successCB);
      // console.log(successCB.data);
      var addUrl1 = 'imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/';
      that.sites.loaded = true;
      that.sites.sites = splicing(successCB.data[1], 'main_pic_hash', addUrl1);
      var addUrl2 = 'imageMogr/format/webp/';
      that.lists.loaded = true;
      that.lists.lists = splicing(successCB.data[2], 'sub_pic_hash', addUrl2);
    }).catch((errorCB) => {
      console.log('Find页网络异常,请稍后再试！');
    })
    //  后台请求数据discover/hotfood
    axios.get('http://localhost:3000/discover/hotfood', {
      params: {
        lng: lng,
        lat: lat
      }
    }).then((successCB) => {
      // console.log(successCB);
      var num = successCB.data;
      var arr = [];
      for (var i = 0; i < num.length; i++) {
        arr.push(num[i].foods[0]);
      }
      that.arrs.loaded = true;
      that.arrs.arrs = splicing(arr, 'image_hash', 'imageMogr/format/webp/');
      // console.log(that.arrs.arrs);
      // console.log(that.arrs.loaded);
    }).catch((errorCB) => {
      console.log('Find页网络异常,请稍后再试！');
    })

    //  后台请求数据discover/gifts
    axios.get('http://localhost:3000/discover/gifts').then((successCB) => {
      that.btns.loaded = true;
      that.btns.btns = splicing(successCB.data, 'image_hash', 'imageMogr/format/webp/');
      // console.log(that.btns.btns);
      // console.log(that.btns.loaded);
    }).catch((errorCB) => {
      console.log('Find页网络异常,请稍后再试！');
    })
  }
}
//  obj为数组，imgUrl数组中对象的属性，输入为字符串
//  addUrl为要？后面要添加的图片地址
//  封装地图拼接函数 splicing(obj, imageUrl, addUrl)
function splicing(obj, imageUrl, addUrl) {
  var objImg = '';
  for (var i = 0; i < obj.length; i++) {
    objImg = obj[i][imageUrl].split('');
    objImg[0] += '/';
    objImg[2] += '/';
    objImg = objImg.join('');
    var a = new RegExp('png');
    if (a.test(objImg)) {
      objImg += '.png';
    } else {
      objImg += '.jpeg';
    }
    obj[i][imageUrl] = 'http://fuss10.elemecdn.com/' + objImg + '?' + addUrl;
  }
  return obj;
}
</script>

<style lang='scss' scoped>
@import '../../static/hotcss/px2rem.scss';
#find {
  background-color: #F5F5F5;
  padding-bottom: px2rem(10);
  header {
    height: px2rem(44);
    >div {
      position: fixed;
      width: 100%;
      height: px2rem(44);
      z-index: 100;
      background-image: linear-gradient(to right, #00AAFF 0%, #0086FF 100%);
    }
    .hd-l {
      display: inline-block;
      width: px2rem(44);
      height: px2rem(44);
      text-align: center;
      vertical-align: top;
      line-height: px2rem(44);
      i {
        font-size: px2rem(18);
        color: #FFF;
      }
    }
    h2 {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      color: #FFF;
      line-height: px2rem(44);
      font-size: px2rem(18);
    }
  }
  .fd-t {
    .fdt-t {
      margin-bottom: px2rem(10);
      background-color: #FFF;
      a {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        h2 {
          font-size: px2rem(18);
          font-weight: normal;
          padding-bottom: px2rem(4);
        }
        p {
          font-size: px2rem(12);
          color: #999;
        }
      }
      a:first-child {
        position: absolute;
        padding: px2rem(24) px2rem(15) px2rem(15);
        border-right: px2rem(0.5) solid #ededed;
        height: px2rem(173);
        h2 {
          color: #FF9700;
        }
        img {
          width: px2rem(75);
          position: absolute;
          top: px2rem(75);
          left: px2rem(43);
        }
      }
      a:nth-of-type(2),
      a:last-child {
        position: relative;
        margin-left: 50%;
        padding: px2rem(24) px2rem(15);
        height: px2rem(173/2);
        h2 {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #F5785D;
        }
        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        img {
          float: right;
          width: px2rem(45);
        }
      }
      a:nth-of-type(2) {
        border-bottom: px2rem(0.5) solid #ededed;
      }
      a:last-child {
        h2 {
          color: #25ADE2;
        }
      }
    }
    .fdt-b {
      height: px2rem(86);
      margin-bottom: px2rem(11);
      a {
        display: inline-block;
        width: 100%;
        height: px2rem(86);
        overflow: hidden;
        border-bottom: px2rem(0.5) solid #ededed;
        img {
          display: inline-block;
        }
      }
    }
  }
  .fd-m,
  .common {
    background-color: #FFF;
    margin-bottom: px2rem(10);
    .fdm-t {
      width: 100%;
      text-align: center;
      padding-bottom: px2rem(20);
      .top {
        width: 100%;
        padding-top: px2rem(39/2);
        span {
          display: inline-block;
          border: px2rem(0.5) solid #333;
          width: px2rem(14);
          height: px2rem(0);
          margin: px2rem(8) px2rem(7/2) px2rem(13/2);
          position: relative;
        }
        span::after {
          content: '';
          display: inline-block;
          width: px2rem(4);
          height: px2rem(4);
          position: absolute;
          top: px2rem(-2);
          background-color: #333;
          border-radius: 50%;
        }
        .left::after {
          left: 100%;
        }
        i {
          font-size: px2rem(16);
          color: #F12C2C;
        }
        h2 {
          display: inline-block;
          font-size: px2rem(18);
          color: #333;
        }
        .right::after {
          right: 100%;
        }
      }
      .bottom {
        font-size: px2rem(12);
        color: #999;
      }
    }
    .fdm-m {
      padding: px2rem(0) px2rem(7) px2rem(20) px2rem(14);
      font-size: 0;
      a {
        display: inline-block;
        width: px2rem(111);
        font-size: 28px;
        padding-right: px2rem(6);
        img {
          width: px2rem(111);
          height: px2rem(110);
        }
        p {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: px2rem(13);
          color: #333;
          padding: px2rem(10) px2rem(0);
        }
        .bottom {
          font-size: 0;
          span {
            font-size: px2rem(12);
            color: #ff5339;
          }
        }
      }
    }
    .fdm-b {
      width: 100%;
      text-align: center;
      padding-bottom: px2rem(20);
      color: #999;
      i {
        font-size: px2rem(12);
      }
    }
  }
  .fd-b {
    .fdm-m {
      a {
        position: relative;
        .bottom {
          span {
            display: inline-block;
          }
          span:first-child {
            max-width: px2rem(94/2);
            margin-right: px2rem(6);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          span:last-child {
            color: #999;
            text-decoration: line-through;
            vertical-align: top;
          }
        }
        >span {
          position: absolute;
          left: 0;
          top: px2rem(4);
          background-color: #413d3c;
          color: #FFF;
          width: px2rem(54);
          text-align: center;
          line-height: px2rem(18);
          font-size: px2rem(12);
        }
      }
    }
  }
}
</style>
